<template>
  <div class="course-review">
    <!-- 评价表单 -->
    <div class="review-form" v-if="showForm">
      <h3>发表评价</h3>
      <el-form :model="reviewForm" :rules="rules" ref="reviewForm">
        <el-form-item label="评分" prop="rating">
          <el-rate v-model="reviewForm.rating" :max="5" show-score></el-rate>
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <el-input
            type="textarea"
            v-model="reviewForm.content"
            :rows="4"
            placeholder="请输入您的评价内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitReview">提交评价</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 评价列表 -->
    <div class="review-list">
      <h3>评价列表</h3>
      <div v-for="review in reviewList" :key="review.review_id" class="review-item">
        <div class="review-header">
          <span class="user-name">{{ review.student_name }}</span>
          <el-rate v-model="review.rating" disabled></el-rate>
          <span class="review-time">{{ review.created_time }}</span>
        </div>
        <div class="review-content">{{ review.content }}</div>
        
        <!-- 回复按钮 -->
        <el-button 
          v-if="!review.parent_id" 
          type="text" 
          @click="showReplyForm(review.review_id)"
        >
          回复
        </el-button>

        <!-- 回复表单 -->
        <div v-if="showReply && currentReviewId === review.review_id" class="reply-form">
          <el-input
            type="textarea"
            v-model="replyContent"
            :rows="2"
            placeholder="请输入回复内容"
          ></el-input>
          <el-button type="primary" size="small" @click="submitReply(review.review_id)">提交回复</el-button>
        </div>

        <!-- 子评价列表 -->
        <div v-if="review.children && review.children.length" class="sub-reviews">
          <div v-for="child in review.children" :key="child.review_id" class="sub-review">
            <div class="review-header">
              <span class="user-name">{{ child.student_name }}</span>
              <span class="review-time">{{ child.created_time }}</span>
            </div>
            <div class="review-content">{{ child.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addReview, getReviewList, replyReview } from '@/services/courseReviewService'

export default {
  name: 'CourseReview',
  props: {
    courseId: {
      type: Number,
      required: true
    },
    bookingId: {
      type: Number,
      required: true
    },
    teacherId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      showForm: true,
      reviewForm: {
        rating: 5,
        content: ''
      },
      rules: {
        rating: [
          { required: true, message: '请选择评分', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入评价内容', trigger: 'blur' },
          { min: 5, max: 500, message: '评价内容长度在5到500个字符之间', trigger: 'blur' }
        ]
      },
      reviewList: [],
      showReply: false,
      currentReviewId: null,
      replyContent: ''
    }
  },
  created() {
    this.getReviews()
  },
  methods: {
    async getReviews() {
      try {
        const params = {
          course_id: this.courseId
        }
        const data = await getReviewList(params)
        this.reviewList = data
      } catch (error) {
        this.$message.error('获取评价列表失败')
      }
    },
    async submitReview() {
      try {
        await this.$refs.reviewForm.validate()
        const params = {
          ...this.reviewForm,
          course_id: this.courseId,
          booking_id: this.bookingId,
          teacher_id: this.teacherId
        }
        await addReview(params)
        this.$message.success('评价提交成功')
        this.reviewForm = {
          rating: 5,
          content: ''
        }
        this.getReviews()
      } catch (error) {
        console.error('提交评价失败:', error)
      }
    },
    showReplyForm(reviewId) {
      this.showReply = true
      this.currentReviewId = reviewId
    },
    async submitReply(parentId) {
      if (!this.replyContent.trim()) {
        this.$message.warning('请输入回复内容')
        return
      }
      try {
        const params = {
          parent_id: parentId,
          course_id: this.courseId,
          booking_id: this.bookingId,
          teacher_id: this.teacherId,
          content: this.replyContent
        }
        await replyReview(params)
        this.$message.success('回复成功')
        this.replyContent = ''
        this.showReply = false
        this.getReviews()
      } catch (error) {
        this.$message.error('回复失败')
      }
    }
  }
}
</script>

<style scoped>
.course-review {
  padding: 20px;
}

.review-form {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.review-list {
  margin-top: 20px;
}

.review-item {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-name {
  margin-right: 10px;
  font-weight: bold;
}

.review-time {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.review-content {
  margin: 10px 0;
  line-height: 1.5;
}

.sub-reviews {
  margin-left: 30px;
  padding-left: 20px;
  border-left: 2px solid #dcdfe6;
}

.sub-review {
  margin: 10px 0;
}

.reply-form {
  margin: 10px 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style> 